<%@ include file="/common/taglibs.jsp"%>

<head>
<title><fmt:message key="createBirth.title" /></title>
<script type="text/javascript" src="scripts/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="scripts/datetimepicker.js">
	//Date Time Picker script- by TengYong Ng of http://www.rainforestnet.com
	//Script featured on JavaScript Kit (http://www.javascriptkit.com)
	//For this script, visit http://www.javascriptkit.com
</script>
<script type="text/javascript">
	function confirmSave(obj) {
		var msg = "Are you sure you want to submit record. Once submitted you can not edit record?";
		ans = confirm(msg);
		return ans;
	}
	
$(function() {
	$(document).ready(function() {
		
		$('#child_info_2').hide();
	    $('#child_info_3').hide();
		
			$('#childCount').change(function () {
					if ($('#childCount option:selected').text() == "Twins"){
						$('#child_info_1').show();
						$('#child_info_2').show();
						$('#child_info_3').hide();
					}
					else if ($('#childCount option:selected').text() == "Triplets"){
					    $('#child_info_1').show();
						$('#child_info_2').show();
						$('#child_info_3').show();
					}
					else if ($('#childCount option:selected').text() == "Single"){
					    $('#child_info_1').show();
						$('#child_info_2').hide();
						$('#child_info_3').hide();
					}
			}); 
	});
});
	
</script>
<style type="text/css">
checkbox.small{display:inline-block;width:75px;height:28px;padding:4px;margin-bottom:9px;font-size:13px;line-height:18px;color:#555555;border:1px solid #ccc;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
	
			div.two_col_left_box{
				float: left;
				padding: 0px;
				width: 380px;
				border: 0px solid gray;
			}

			div.two_col_right_box{
				float:right;
				padding: 0px;
				width: 380px;
				border: 0px solid gray;
				
			}
	
			div.three_col_left_box{
				float: left;
				padding: 0px;
				width: 270px;
				border: 0px solid gray;
			}

			div.three_col_mid_box{
				float:left ;
				padding: 0px;
				width: 270px;
				border: 0px solid gray;
				
			}
			
			div.three_col_mid_box_half{
				float:left ;
				padding: 0px;
				margin-left:10px;
				width: 80px;
				border: 0px solid gray;
				
			}
			
			div.three_col_right_box{
				float:left;
				padding: 0px;
				width: 220px;
				border: 0px solid gray;
				
			}
			
			  div.form_row{
				width: 860px;
				padding: 1px;
				overflow: hidden;
				border: 0px solid gray;
				margin-top: 5px;
			}
			
			div.section_header{
				width: 840px;
				height: 26px;
			    color: #FFFAFA;		
				display: table-cell;
				vertical-align: middle;
				background-color: #545454;
				padding: 0 5px 2px;
				font-family: serif;
				font-size: 14px;
			}
		
	</style>
</head>

<body class="createBirth" />

<div class="span12">
	<s:form name="createBirthForm" action="saveBirth.action"
		enctype="multipart/form-data" method="post" validate="true"
		cssClass="well form-vertical">
		<s:hidden key="birth.id" />
		<s:hidden key="birth.status" />
		<s:hidden key="zoneId" />
		<s:hidden key="id" />
		<input type="hidden" name="from" value="${param.from}" />
		
		<div class="section_header">
		   <b>BIRTH INFORMATION</b>
		</div>
			
		<div class="form_row">
			<div class="three_col_left_box">
			  <fieldset class="control-group">
						<label class="control-label"> * Date of Birth:</label>
						<div class="controls">
							<input id="birthdate" name="birth.birthDateString" type="text" readonly="readonly"
								size="25" title="date" contenteditable="false" value="${birth.birthDateString}"> <a
								href="javascript:NewCal('birthdate','ddmmmyyyy',true,24)"><img
								src="images/cal.gif" width="16" height="16" border="0"
								alt="Pick date and time"> </a>
						</div>
				</fieldset>
			</div>
		   
		   <div class="three_col_mid_box">
			    <s:textfield key="birth.motherName" required="true" />
			</div>
		   
			<div class="three_col_right_box">
			   <s:textfield key="birth.fatherName" required="true" />
			</div>
			
		 </div>
		
		<div class="form_row">
			<div class="three_col_left_box">
				<s:select id="childCount" key="birth.birthType" 
						list="birthTypeList" headerKey="1"
						></s:select>
				
			</div>
		   
		   <div class="three_col_mid_box">
			   <s:textfield key="birth.mobileNumber" required="true" />
			</div>
			
			<div class="three_col_right_box">
			   <s:textfield key="birth.email" required="true" />
			</div>
		 </div> 
		
		<div class="form_row" id="child_info_1">
			<div class="three_col_left_box">
			 	<s:textfield key="birth.childName" />
			</div>
		   
		   <div class="three_col_mid_box" >
			    <s:select name="birth.sex" key="birth.sex"
						list="#{'Male':'Male','Female':'Female'}" headerKey="-1"
						headerValue="--- Select ---" required="true" ></s:select>
			</div>
		   
			<div class="three_col_right_box">
			   <s:textfield key="birth.birthWeight" />
			</div>
			<div class="three_col_mid_box_half">
			    <fieldset class="control-group">
						<label class="control-label">Still Birth</label>
						<div class="controls">
							<label class="checkbox inline">
									 <input type="checkbox" name="birth.stillBirth" id="birth.stillBirth" value="true" class="small"/> 
							</label>
						</div>
				</fieldset>			
			</div>
		 </div>
		 <div class="form_row" id="child_info_2">
			<div class="three_col_left_box">
			 <s:textfield key="birth.childName2" />
			</div>
		   
		   <div class="three_col_mid_box">
			    <s:select name="birth.sex2" key="birth.sex2"
						list="#{'Male':'Male','Female':'Female'}" headerKey="-1"
						headerValue="--- Select ---" required="true" ></s:select>
			</div>
		   
			<div class="three_col_right_box">
			   <s:textfield key="birth.birthWeight2" />
			</div>
			<div class="three_col_mid_box_half">
			    <fieldset class="control-group">
						<label class="control-label">Still Birth</label>
						<div class="controls">
							<label class="checkbox inline">
									<input type="checkbox" name="user.enabled" value="true" id="user.enabled" class="small"/>
								
							</label>
						</div>
				</fieldset>			
			</div>
		 </div> 
		 
		 <div class="form_row" id="child_info_3">
			<div class="three_col_left_box">
			 	<s:textfield key="birth.childName3" />
			</div>
		   
		   <div class="three_col_mid_box">
			    <s:select name="birth.sex3" key="birth.sex3"
						list="#{'Male':'Male','Female':'Female'}" headerKey="-1"
						headerValue="--- Select ---" required="true" ></s:select>
			</div>
		   
			<div class="three_col_right_box">
			   <s:textfield key="birth.birthWeight3" />
			</div>
			<div class="three_col_mid_box_half">
			    <fieldset class="control-group">
						<label class="control-label">Still Birth</label>
						<div class="controls">
							<label class="checkbox inline">
									<input type="checkbox" name="user.enabled" value="true" id="user.enabled" class="small"/>
								
							</label>
						</div>
				</fieldset>			
			</div>
		 </div> 
	
		 <div class="section_header">
		   <b>PARENT INFORMATION</b>
		</div>
		<div class="form_row">
			<div class="three_col_left_box">
			   <s:textfield key="birth.residencePlaceName"
						title="Name of town/village" required="true" />
			</div>
		   
		   <div class="three_col_mid_box">
			    <s:select name="birth.residencePlaceType"
						key="birth.residencePlaceType" list="resPlaceTypes" headerKey="-1"
						headerValue="--- Select ---" required="true" ></s:select>
			</div>
		   
			<div class="three_col_right_box">
			  <s:textfield key="birth.district" required="true" />
			</div>
		 </div>
		
		<div class="form_row">
			<div class="three_col_left_box">
				<s:textfield key="birth.state" required="true" />
			</div>
		   
		   <div class="three_col_mid_box">
				<s:select name="birth.fatherEducation" key="birth.fatherEducation"
						list="educationLevels" headerKey="-1" headerValue="--- Select ---" required="true" ></s:select>
			</div>
		   
			<div class="three_col_right_box">
				<s:textfield key="birth.fatherOccupation"
						title="If no occupation, write NIL" required="true" />
			</div>
		 </div>
				
		<div class="form_row">
			<div class="three_col_left_box">
				<s:select name="birth.familyReligion" key="birth.familyReligion"
						list="religions" headerKey="-1" headerValue="--- Select ---" required="true" ></s:select>
			</div>
		   
		   <div class="three_col_mid_box">
				<s:select name="birth.motherEducation" key="birth.motherEducation"
						list="educationLevels" headerKey="-1" headerValue="--- Select ---" required="true" ></s:select>
			</div>
		   <div class="three_col_right_box">
				<s:textfield key="birth.motherOccupation"
						title="If no occupation, write NIL" />
			</div>
		 </div>
		 <div class="section_header">
		   <b>OTHER INFORMATION</b>
		</div>		
		
		<div class="form_row">
			<div class="three_col_left_box">
				<s:select name="birth.motherAgeAtMarriage"
						key="birth.motherAgeAtMarriage" list="ageList" headerKey="-1"
						headerValue="--- Select ---"
						title="If married more than once, enter the age at the time of first marriage" required="true" ></s:select>
			</div>
		   
		   <div class="three_col_mid_box">
				<s:select name="birth.motherAgeOnChildBirth"
						key="birth.motherAgeOnChildBirth" list="ageList" headerKey="-1"
						headerValue="--- Select ---" required="true" ></s:select>
			</div>
		   
			<div class="three_col_right_box">
				<s:select name="birth.numberOfAliveChildren"
						key="birth.numberOfAliveChildren" list="numOfChildren"
						headerKey="-1" headerValue="--- Select ---"
						title="Total children born alive from all marriage(s) including this child" required="true" ></s:select>
			</div>
		 </div>
		<div class="form_row">
			<div class="three_col_left_box">
				<s:select name="birth.attentionType" key="birth.attentionType"
						list="attentionTypes" headerKey="-1" headerValue="--- Select ---" required="true" ></s:select>
				
			</div>
		   
		   <div class="three_col_mid_box">
				<s:select name="birth.deliveryMethod" key="birth.deliveryMethod"
						list="deliveryType" headerKey="-1" headerValue="--- Select ---" required="true" ></s:select>
			</div>
		   
			<div class="three_col_right_box">
				<s:textfield key="birth.pregnancyDuration" required="true" />
			</div>
		 </div>
		<div class="form_row">
			<div class="three_col_left_box">
				<s:file name="file" label="%{getText('uploadForm.file')}"  required="true"/>
					<s:if test="birth.idProof != null">
						<img
							src="showImage.action?id=<s:property value="birth.id"/>&from=list"
							border="0" width="100" height="100">
					</s:if>

			</div>
		   
		   <div class="three_col_mid_box">
		   		<c:if test="${birth.status == 'Rejected'}">
					<b>Rejection Comments:</b>
					 <s:iterator value="birth.comments" var="row" status="status">
                    	
                    	</br><s:property value="createdOn"/> - <s:property value="comments"/>
                		</s:iterator>
                
						<c:forEach items="${birthTypeList}" var="list1">
							<s:property value="%{list1}" />
					    </c:forEach>
					 </c:if>
			</div>
		   
			<div class="three_col_right_box">
				
			</div>
		 </div>
			
<!-- 		</div> -->


		<fieldset class="form-actions">
		<security:authorize ifAllGranted="ROLE_HOSPITAL">
			<c:if test="${(birth.status == 'Draft' or birth.status == 'Rejected'  ) or empty birth.id }">
				<s:submit key="button.submit" method="submitBirth"
					onclick="return confirmSave('user');" cssClass="btn btn-primary"
					theme="simple"
					title="Birth record will be submitted to zone office for approval" />
				<s:submit key="button.save" cssClass="btn btn-primary"
					theme="simple"
					title="Birth record will be saved and available for edit/submit later" />
			</c:if>
			</security:authorize>
			
			<s:submit key="button.cancel" method="cancel" cssClass="btn"
				theme="simple" />
		</fieldset>
	</s:form>

</div>

